<template>
  <v-row align="start" justify="center">
    <v-col cols="10">
      <v-card>
        <v-card-title>
          系统角色
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="搜索"
            single-line
            hide-details
          ></v-text-field>
        </v-card-title>
        <v-data-table :headers="headers" :items="desserts" :search="search" >

        <template v-slot:item.name="props">
          <v-edit-dialog
          large
            :return-value.sync="props.item.name"
            @save="save(props.item)"
            @cancel="cancel"
          >
            <div>{{ props.item.name }}</div> 
            <template v-slot:input>
            <div class="mt-4 title">Update Iron</div>
          </template>
            <template v-slot:input>
              <v-text-field
                v-model="props.item.name"
                :rules="[max25chars]"
                label="Edit"
                single-line
                counter
                autofocus
              ></v-text-field>
            </template>
          </v-edit-dialog>
        </template>
</v-data-table>


      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
        max25chars: v => v.length <= 25 || '长度超出!',
      search: "",
      headers: [
        {
          text: "角色名称",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "角色编号", value: "code" },
        { text: "角色类型", value: "type" },
        { text: "角色描述", value: "explain" }
      ],
      desserts: [],
      tableData: []
    };
  },
  methods: {
    getNewsList() {
      this.axios
        .get("/role/list")
        .then(response => {
         
          this.desserts = response.data.data.content;
        })
        .catch(response => {
          console.log(response.data.message);
        });
    },

    save (data) {
        console.log(data)
      },
      cancel () {
       console.log('cancel')
      },
  },
  created() {
    this.getNewsList();
  }
};
</script>